/**
 * Created by qiangqiang on 2016/12/9.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Navigator,
    View,
    TouchableOpacity,
    Image,
    Text,
    BackAndroid,
    Platform
} from 'react-native';

import Header from '../component/Header';

export default class BasicInformation extends Component {
    _backtoMeTab = () => {
        const {navigator} = this.props;
        if (navigator) {
            navigator.pop();
        }
    };

    componentWillMount() {
        if (Platform.OS === 'android') {
            BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
        }
    }

    componentWillUnmount() {
        if (Platform.OS === 'android') {
            BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);
        }
    }

    /* Android返回键执行的操作 被之前BackAndoid组件调用*/
    onBackAndroid = () => {
        const {navigator} = this.props;
        const routers = navigator.getCurrentRoutes();
        if (routers.length > 1) {
            navigator.pop();
            return true;
        }
        return false;
    };

    render() {
        return (
            <View style={styles.container}>
                <Header name="基本信息"
                        function={this._backtoMeTab}/>

                <View style={{flex: 10}}>
                    <View style={styles.body_view1}>
                        <View style={styles.body_view1_part}>
                            <View style={styles.body_view1_part_left}>
                                <Text>
                                    照片
                                </Text>
                            </View>

                            <View style={styles.body_view1_part_right}>
                                <Text style={styles.part_right_font}>
                                    王超
                                </Text>

                                <Text style={styles.part_right_font}>
                                    职信号:18888888
                                </Text>

                                <Text style={styles.part_right_font}>
                                    开发部
                                </Text>

                                <Text style={styles.part_right_font}>
                                    部长
                                </Text>
                            </View>
                        </View>
                    </View>

                    <View style={styles.body_viewmore}>
                        <Text style={[styles.body_viewmore_font, {flex: 8}]}>
                            手机号:1388888888
                        </Text>

                        <TouchableOpacity style={[styles.body_viewmore_button, {backgroundColor: "#2E7CDE", flex: 1}]}>
                            <Text style={styles.body_viewmore_buttonFont}>
                                更换
                            </Text>
                        </TouchableOpacity>
                    </View>

                    <View style={styles.body_viewmore}>
                        <Text style={styles.body_viewmore_font}>
                            身份证号:3300************
                        </Text>
                    </View>

                    <View style={styles.body_viewmore}>
                        <Text style={[styles.body_viewmore_font, {flex: 8}]}>
                            6613公司
                        </Text>

                        <TouchableOpacity style={[styles.body_viewmore_button, {backgroundColor: "#FF0000", flex: 1}]}>
                            <Text style={styles.body_viewmore_buttonFont}>
                                离职
                            </Text>
                        </TouchableOpacity>
                    </View>

                    <View style={styles.finalView}>
                        <TouchableOpacity style={styles.finalButton}>
                            <Text style={styles.finalButtonFont}>
                                注销账号
                            </Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#ffffff"
    },
    body_view1: {
        flex: 2,
        borderBottomWidth: 1,
        borderColor: "#CACACA"
    },
    body_view1_part: {
        flexDirection: "row",
        marginLeft: 15,
        marginBottom: 20,
        marginTop: 15,
        height: 100
    },
    body_view1_part_left: {
        width: 100,
        height: 100,
        justifyContent: "center",
        alignItems: "center",
        borderWidth: 1,
        borderColor: "#CACACA"
    },
    body_view1_part_right: {
        marginLeft: 25
    },
    part_right_font: {
        flex: 1
    },
    body_viewmore: {
        flexDirection: "row",
        flex: 1,
        borderBottomWidth: 1,
        alignItems: "center",
        borderColor: "#CACACA"
    },
    body_viewmore_font: {
        marginLeft: 15
    },
    body_viewmore_button: {
        marginRight: 15,
        alignItems: 'center',
        width: 40,
        height: 20,
        justifyContent: 'center',
        borderRadius: 5
    },
    body_viewmore_buttonFont: {
        fontSize: 15,
        color: "#ffffff"
    },
    finalView: {
        flex: 3,
        justifyContent: "center",
        alignItems: "center"
    },
    finalButton: {
        alignItems: 'center',
        justifyContent: 'center',
        width: 200,
        height: 50,
        backgroundColor: "#FF0000"
    },
    finalButtonFont: {
        fontSize: 20,
        color: "#ffffff"
    }
});